<style scoped="scoped">
	html {
		background-color: #f2f2f2;
	}

	body {
		background-color: #f2f2f2;
	}

	.PlanDetails header {
		font-size: 18px;
		background-color: #2A71C8;
		color: white;
		text-align: center;
		color: #FFFFFF;
		padding: 3% 0;
	}

	.PlanDetails header img {
		float: left;
		width: 5%;
		margin: 1% 0 0 2%;
	}

	.planwrap {
		background-color: #2A71C8;
		height: 110px;
	}

	.PlanDetails .details .plandiv {
		width: 90%;
		background: rgba(255, 255, 255, 1);

		margin: auto;
		text-align: left;
		font-size: 16px;
		z-index: 999;
		overflow: hidden;
	}

	.PlanDetails .BankLogo {
		/* float: left; */
		/* margin: 2.5% 0 0 3%; */
		background: #fff;
		border-radius: 50%;
		position: relative;
		top: 4px;

	}

	.PlanDetails .BankTitle {
		/* float: left;
		margin: 1.8% 2%;
		font-size: 16px; */
		margin-left: 6px;
		display: inline-block;font-size: .3rem;
	}

	.PlanDetails .BankState {
		float: right;
		margin-right: 2%;
		margin-top: 3px;
		line-height: 32px;
		width: 30%;
	}

	.PlanDetails .icolo {
		display: inline-block;
		width: 10px;
		height: 10px;

		margin-right: 5%;
		margin-top: 5%;
		border-radius: 50%;
	}

	.PlanDetails .BankSurplus {
		width: 100%;
		text-align: center;
	}

	.PlanDetails .BankSurplusP {
		font-size: 16px;
		margin-top: 10px;
		font-family: PingFang-SC-Regular;
		color: #C1C1C1;
	}

	.PlanDetails .BankSurplusP1 {
		font-size: 28px;
		padding: 5px 0 10px 0;
		font-family: PingFang-SC-Bold;
		color: #303030;
	}

	.PlanDetails .BankSurplusP2 {
		color: rgba(177, 190, 214, 1);
		font-size: 16px;
	}

	.PlanDetails .BankSurplus hr {
		height: 1px;
		background: rgba(230, 234, 243, 1);
		border: none;
	}

	.Total {
		float: left;
		width: 33.3%;
		font-size: 16px;
		border-right: 1px solid #E6EAF3;
		margin: 5% 0;
	}

	.TotalTex1 {
		font-size: 16px;
		color: rgba(109, 137, 189, 1);
	}

	.TotalTex2 {
		font-size: 16px;
		color: #6D89BD;
	}

	.procedures {
		float: right;
		width: 33.3%;
		margin-top: 5%;
		font-size: 16px;
	}

	.procedures img {
		position: relative;
		top: 4%;
	}

	.procedures1 {
		color: #6D89BD;
		font-size: 16px;
	}

	.procedures2 {
		color: #4A7AD3;
		font-size: 16px;
	}

	.bianhao {
		text-align: left;
		background: rgba(177, 193, 224, 1);
		border-radius: 0rem 0 1rem 1rem;
		font-size: 16px;
		font-family: PingFang-SC-Regular;
		color: rgba(255, 255, 255, 1);
	}

	.bianhao p {
		margin-left: 5%;
	}

	.kk {
		/* background: #fff; */
		border-radius: 10px;
		margin: 0 auto;
		padding: 0 0 15px;
		width: 90%;	
	}

	.kk .unbhr {
		text-align: center;
		display: inline-block;
		margin: auto;
		position: relative;
		bottom: -10%;
		background-color: #fcfcfc;
		font-family: PingFang-SC-Regular;
		color: rgba(168, 168, 168, 1);
	}

	.bill {
		width: 100%;
		padding-bottom: 5%;
		list-style-type: none;
		text-align: center;
		font-size: 14px;
		margin: auto;
	}

	.bill li {
		text-align: left;
		border-bottom: 1px solid #F2F2F2;
		/* padding: 0 10px; */
		line-height: 18px;
	}

	.bill .tex1 {
		/* padding-top: 3%; */
		margin: 3% 0;
		color: black;
	}

	

	.bill .tex2 {
		font-family: PingFangSC-Regular;
		color: rgba(140, 140, 140, 1);
		margin: 3% 0;
	}

	.bill .tex2 span:last-child {
		float: right;
		font-family: PingFangSC-Regular;
		color: rgba(140, 140, 140, 1);
	}
	/* .bill .tex2 .spa1{
		float: right; 
		color: rgba(140, 140, 140, 1);
	} */
	.inp {
		clear: both;
		margin-top: 0rem;
	}

	.get {
		float: right;
		background: rgba(42, 113, 200, 1);
		border-radius: 5px;
		text-align: center;
		border: none;
		color: white;
		padding: 2% 3%;
		margin-right: 6rem;
	}

	.opt {
		margin-top: 0px;
		outline: none;
		/*border: 1px solid #BBBBBB;*/
		border-radius: 4px;
		position: relative;
		height: 40px;
		-webkit-appearance: none;
		appearance: none;
		border: none;
		font-size: 18px;
		padding: 0px 10px;
		display: block;
		width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: #FFFFFF;
		color: #333333;
		border-radius: 4px;
	}

	.xlcon {
		display: inline-block;
		width: 160px;
		float: right;
		font-size: 14px;
		text-align: right;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.BankState {
		float: right;
		margin-right: 5%;
		font-size: 16px;
	}

	.icolorred {
		display: inline-block;
		width: 20px;
		height: 20px;
		float: left;
		margin-right: 5%;
		margin-top: 5%;
		background: rgba(106, 196, 125, 1);
		border-radius: 50%;
	}

	.icoloryellow {
		background-color: #F49D57;
		display: inline-block;
		width: 20px;
		height: 20px;
		float: left;
		margin-right: 5%;
		margin-top: 5%;
		border-radius: 50%;
	}

	.icoloryc {
		display: inline-block;
		width: 20px;
		height: 20px;
		float: left;
		margin-right: 5%;
		margin-top: 5%;
		border-radius: 50%;
		background: red;
	}
	.clecly{
		width: 5px;
		border-radius: 50%;
		height: 5px;
		display: inline-block;
		margin-right: 2px;
	}
</style>
<template>
	<div class="PlanDetails">
		<header><img @click="goBack" src="http://hstatic.1818pay.cn/image/icon/left.png" /><span>方案详情</span></header>
		<div class=" details" style="height:100%;background:#f2f2f2;padding-top: 23px;">
			<div class="plandiv">
				<!-- <p> <img class="BankLogo" :src='this.$route.params.creditCard.issuingBank | fmtBankimsrc' />
					<span class="BankTitle">{{creditCard.issuingBank | fmtBankCode}}({{creditCard.cardNumber | fmtCardNo }})</span>
					
				</p> -->
				<div style='display: flex;justify-content: space-between; width: 100%;background:#4F8BF4;'>
					<div style=" color: #fff;width:90%;margin:5px auto;" >
						<div style="display: inline-block;width:46.5%">
							<img class="BankLogo" :src='creditCard.issuingBank | fmtBankimsrc' />
							<div class="BankTitle" >
								<p style='font-size: 14px;'>{{creditCard.issuingBank | fmtBankCode}}({{creditCard.cardNumber | fmtCardNo }})</p>
							</div>
						</div>
						<div style="display: inline-block;width:7%">
							<img style="width: 20px;height:20px;position: relative; top: 4px;" src="http://hstatic.1818pay.cn/image/icon/dae/yulan_dao@3x.png" alt="">
						</div>
						<div style="display: inline-block; width: 46.5%;text-align: right;">
							<img class="BankLogo" :src='scdata.bankCode | fmtBankimsrc' />
							<div class="BankTitle">
								<p style='font-size: 14px;'>{{scdata.bankCode | fmtBankCode}}({{scdata.cardNo | fmtCardNo }})</p>
							</div>
						</div>
					</div>
				</div>
				<div style="clear: both;"></div>
				<div class="BankSurplus">
					<div style="clear: both;"></div>
					<p class="BankSurplusP">今日预计到账金额</p>
					<p class="BankSurplusP1">{{amount / 100}}</p>
					<!-- <hr /> -->
				</div>

			</div>
		
			<div style="clear: both;"></div>
			<div style="margin: 0 auto;width:100%;background: #fff;margin-top: 1rem;height:100%;">
				<div class="kk">
					<div style="font-size: .7rem; border-radius: 10px 10px 0 0; color: #303030; padding: 5px 0;">今日方案详情
						<div style=" float: right;">
							<img style="width: 13px; position: relative; top: 3px;" src="http://hstatic.1818pay.cn/image/icon/dae/weizhi@3x.png" alt="">
							{{city}}
						</div>
					</div>
					<ul class="bill" v-if="items.length!=0">
						<li v-for="item in items">
							<div v-if="item.payType==2" style="    display: flex;align-items: center;">
								<p style="display: inline-block;"><img style="    width: 37px;" src="http://hstatic.1818pay.cn/image/icon/dae/xiaofei@3x.png" alt=""></p>
								<div style="flex: 1;font-size: .7rem;margin-left: 6px;">
									<p class="tex1">消费{{item.amount/100}}元<span style='color:#949494;'>(包含手续费{{item.fee / 100}}元)</span>
										<!--  -->
										<span v-if="item.state==2" style="color: #467BE7;float: right;" > <span class="clecly" style='background:#467BE7'></span>待执行</span>
										<span v-if="item.state==4" style="color: #EB793A;float: right;" > <span class="clecly" style='background:#EB793A' />手动中断</span>
										<span v-if="item.state==5" style="color: #52A741;float: right;" > <span class="clecly" style='background:#52A741' />交易中</span>
										<span v-if="item.state==6&&item.payState==3" style="color: #52A741;float: right;" > <span class="clecly" style='background:#52A741' />成功</span>
										<span v-if="item.state==6&&item.payState==4" style="color: #CC352A;float: right;" > <span class="clecly" style='background:#CC352A' />失败</span>
										<div style="clear: both;"></div>

									</p>
									<p class="tex2">{{item.bankCode | fmtBankCode}}【{{item.cardNo|fmtCardNo}}】<span>{{item.executeTime | fmtDate}}</span></p>
									<p v-if="item.state==6&&item.payState==4" style="color:black">失败原因:<span style="color:red">{{item.cause}}</span></p>
								</div>
							</div>
							<div v-if="item.payType==1" style="    display: flex;align-items: center;">
								<p><img style="    width: 37px;" src="http://hstatic.1818pay.cn/image/icon/dae/ruzhang@3x.png" alt=""></p>
									<div style="flex: 1;font-size: .7rem;margin-left: 6px;">
									<p class="tex1">到账{{item.amount/100}}元&nbsp;
										<span v-if="item.state==2" style='color:#949494;'>(包含手续费{{item.fee / 100}}元)</span>
										<span v-else style='color:#949494;'>{{item.bankCode | fmtBankCode}}【{{item.cardNo|fmtCardNo}}】</span>
										<span v-if="item.state==2" style="color: #467BE7;float: right;" > <span class="clecly" style='background:#467BE7'></span> 待执行</span>
										<span v-if="item.state==4" style="color: #EB793A;float: right;" > <span class="clecly" style='background:#EB793A'></span>手动中断</span>
										<span v-if="item.state==5" style="color: #52A741;float: right;" > <span class="clecly" style='background:#52A741'></span>交易中</span>
										<span v-if="item.state==6&&item.repaymentState==3" style="color: #52A741;float: right;" > <span class="clecly" style='background:#52A741'></span>成功</span>
										<span v-if="item.state==6&&item.repaymentState==4" style="color: #CC352A;float: right;"> <span class="clecly" style='background:#CC352A'></span>失败</span>
										<div style="clear: both;"></div>
									</p>
									<p class="tex2" v-if='item.state==2' >{{item.bankCode | fmtBankCode}}【{{item.cardNo|fmtCardNo}}】<span>{{item.executeTime | fmtDate}}</span></p>
									<p class="tex2" v-else><span v-if="item.state==6&&item.repaymentState==3" style="color:#EE9565;">(实到账{{item.arrivalAmount / 100}}元,含手续费{{item.fee/100}}元)</span><span>{{item.executeTime | fmtDate}}</span></p>
									<p v-if="item.state==6&&item.repaymentState==4" style="color:black">失败原因:<span style="color:red">{{item.cause}}</span></p>
								</div>
							</div>
						</li>
					</ul>
					<div v-else style="text-align: center;">
						<img src="http://hstatic.1818pay.cn/image/card/jihuakong@3x.png" alt="" style="width: 57%; margin: 2rem 0;">
						<p style="color:#949494; margin-bottom: 20px; font-size: 14px;">今日无方案，可前往全部方案查看方案详情</p>
					</div>
					<div style="color:#2971C8;font-size:14px;text-align: center;" @click="searchClick">
						查看全部方案<van-icon name="arrow" style="top:2px;"/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
 
	import AreaList from './are';
	export default {
		data() {
			return {
				xlxzshow: false,
				value: '',
				yhlogo: '',
				yhsrc: '',
				jdt: 2000,
				zje: '请输入到账金额',
				items: [],
				creditCard: [],
				scdata:{}, //储蓄卡
				hosta:this.$store.state.host,
				merchantId: this.$store.state.merchantId,
				token: this.$store.state.token,
				amount:null,//今日预计到账金额
				city:'', //位置
			};
		},
		created: function () {
			// console.log(this.$store.state.institutionId)
			this.res = this.$route.params.res.list;
			this.creditCard = this.$route.params.cccard;
			// console.log(this.creditCard)
			this.city = this.creditCard.plan.city
			// this.items = this.res.list
			// console.log(this.items)
			// console.log(this.$store.state.scdata)
			for(let i=0;i<this.res.length;i++){
				if(this.res[i].payType==1){
					// console.log(i)
					// console.log(this.res[i].cardNo)
					this.scdata=this.res[i]
					break;
				}
			}
			
			// alert(111)
			// this.$Spin.show();
			var self=this
			var date = new Date();
			var year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate();
			if (month < 10) {
				month = "0" + month;
			}
			if (day < 10) {
				day = "0" + day;
			}
			var nowDate = year + "-" + month + "-" + day;
			
			axios.get(self.hosta + "/plans/findPlanDetail?sort=executeTime&order=asc", {
				params: {
					merchantId: self.merchantId,
					token: self.token,
					planId: self.creditCard.plan.pId,
					pageSize: 200,
					executeDateStr:nowDate
				}
			}).then(function (res) {
				// this.$Spin.hide();
				// console.log(res.data.data.list)
				if(res.data.data.list!=''){
					self.items = res.data.data.list
					for(let i=0;i<self.items.length;i++){
						if(self.items[i].payType==1){
							self.amount+=self.items[i].arrivalAmount
						}
					}
					
				}
				// console.log(self.items)
				
			});
			
		},
		filters: {
			fmtcity: function (city) {
				return AreaList.city_list[city]
			},
		
			fmtBankimsrc: function (imgsrc) {
				return 'http://hstatic.1818pay.cn/image/banklogo/' + imgsrc + '.png'
			},
			fmtBankCode: function (bankCode) {
				if (typeof (bankCode) != 'undefined') {

					var yhname = {
						'ICBC': "工商银行",
						'ABC': "农业银行",
						'BOC': "中国银行",
						'CCB': "建设银行",
						'CMBCHINA': "招商银行",
						'POST': "邮政储蓄",
						'ECITIC': "中信银行",
						'CEB': "光大银行",
						'BOCO': "交通银行",
						'CIB': "兴业银行",
						'CMBC': "民生银行",
						'PINGAN': "平安银行",
						'CGB': "广发银行",
						'HXB': "华夏银行",
						'SPDB': "浦发银行",
						'SHB': "上海银行",
						'CBHB': "渤海银行",
						'JSB': "江苏银行"
					}
					return yhname[bankCode]

				}

			},
			fmtCardNo: function (cardNo) {
				return (cardNo + '').slice((cardNo + '').length - 4);
			},
			fmtDate: function (time) {
				time = new Date(time)
				var year=time.getFullYear(time)
				var month = time.getMonth(time) + 1 < 10 ? "0" + (time.getMonth() + 1) : time.getMonth() + 1, //月份是从0开始的
					day = time.getDate(time) < 10 ? "0" + time.getDate() : time.getDate(),
					hour = time.getHours(time) < 10 ? "0" + time.getHours() : time.getHours(),
					min = time.getMinutes(time) < 10 ? "0" + time.getMinutes() : time.getMinutes()

				time = year+'-'+month + '-' + day +' ' + hour + ':' + min
				return time;
			},
			fmtState: function (pd) {
				if (pd.state == 1) {
					return "待执行";
				}
				if (pd.state == 2) {
					return "执行中";
				}
				if (pd.state == 4) {
					return "手动中断";
				}
				if (pd.state == 5) {
					return "交易中";
				}
				if (pd.state == 6) {
					if (pd.payType == 1) {
						if (pd.repaymentState == 3) {
							return "成功";
						} else {
							return "失败";
						}
					} else {
						if (pd.payState == 3) {
							return "成功";
						} else {
							return "失败";
						}
					}

				}
			}

		},
		methods: {
			goBack() {
				this.$router.push({
					name: 'index',
				})
			},
			searchClick(){
				 // executeDateStr=2019-11-29
				var self=this
				self.$router.push({
					name: "searchjhxq",
					params: {
						creditCard: self.creditCard,
						res: self.$route.params.res //计划详情列表
					}
				});
			},

		}

	}
</script>